<template>
  <div style="width: 100%" class="job">
    <div class="myChart" ref="myChart"></div>
  </div>
</template>
<script>
// http://echarts.zhangmuchen.top/#/detail?cid=xT1JWXkiKc
import * as echarts from "echarts";
import { api } from "@/utils/api";
import "echarts-liquidfill";
export default {
  name: "Proportion",
  data() {
    return {
      myCharts: null,
      Infos: {},
      timer: null,
    };
  },
  mounted() {
    this.getNdsdTotalTime().then((res) => {
      this.OptionSet();
    });
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    } else {
      this.timer = setInterval(() => {
        this.getNdsdTotalTime().then((res) => {
          this.OptionSet();
        });
      }, 10000);
    }
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    getNdsdTotalTime() {
      return new Promise(async (reslove, reject) => {
        let params = {};
        let [ERR, LRES] = await api.getNdsdTotalTimeAPI();
        this.Infos = LRES.data;
        reslove(LRES.data);
        // console.log("getNdsdTotalTime", LRES);
      });
    },
    OptionSet() {
      let myCharts = echarts.init(this.$refs.myChart);
      let value = this.Infos.InBoundTotalTime / 24;
      let value1 = this.Infos.OutBoundTotalTime / 24;
      let data = [value, value1];

      let option = {
        title: [
          {
            text: `入库总时长(${this.Infos.InBoundTotalTime}h)`,
            x: "12%",
            y: "75%",
            textStyle: {
              fontSize: 14,
              fontWeight: "100",
              color: "#5dc3ea",
              lineHeight: 16,
              textAlign: "center",
            },
          },
          {
            text: `出库总时长(${this.Infos.OutBoundTotalTime}h)`,
            x: "61%",
            y: "75%",
            textStyle: {
              fontSize: 14,
              fontWeight: "100",
              color: "#5dc3ea",
              lineHeight: 16,
              textAlign: "center",
            },
          },
        ],
        series: [
          {
            type: "liquidFill",
            radius: "57%",
            center: ["25%", "45%"],
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#446bf5",
                  },
                  {
                    offset: 1,
                    color: "#2ca3e2",
                  },
                ],
                globalCoord: false,
              },
            ],
            data: [value, value], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "RGBA(51, 66, 127, 0.7)",
            },
            label: {
              show: true,
              normal: {
                textStyle: {
                  fontSize: 20,
                  color: "#fff",
                },
              },
              formatter: function (params) {
                //圆环显示文字
                console.log("圆环显示文字", params);
                return "圆环显示文字";
              },
            },
            outline: {
              show: false,
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: "#112165",
              },
            },
          },

          {
            //第二个球的填充
            type: "liquidFill",
            radius: "57%",
            center: ["75%", "45%"],
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#2aa1e3",
                  },
                  {
                    offset: 1,
                    color: "#08bbc9",
                  },
                ],
                globalCoord: false,
              },
            ],
            data: [value1, value1], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "RGBA(51, 66, 127, 0.7)",
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 20,
                  color: "#fff",
                },
              },
            },
            outline: {
              // show: false
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: "#112165",
              },
            },
          },
        ],
      };

      // console.log("option", option);
      myCharts.setOption(option, true);
    },
  },
};
</script>
<style lang="scss" scoped>
.job {
  height: calc(100% - 30px);
}
@font-face {
  font-family: "FZY4JW";
  src: url("../../assets/font/FZY4JW.TTF");
}
@font-face {
  font-family: "FZZiYHJW";
  src: url("../../assets/font/FZZiYHJW.TTF");
}
.zb_space {
  font-family: "FZY4JW";
  .lenth {
    display: flex;
    justify-content: center;
    align-items: center;
    .num {
      font-size: 28px;
      padding-left: 8px;
      position: relative;
      bottom: 2px;
    }
    span {
      font-size: 28px;
    }
  }
  .tag {
    width: 8px;
    height: 8px;
    background: fuchsia;
    border-radius: 50%;
    margin-right: 5px;
  }
  width: 40%;
  height: 80%;
  //   border: 1px solid rebeccapurple;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  .zb_space_txt_center {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // height: 70%;
    // border: 1px solid blue;
  }
}
.myChart,
.myChart2 {
  width: 100%;
  height: 100%;
}
</style>
